@import "default";
@import "common";

#container {
    width: 100%;
    height: 100%;
    position: absolute;
    flex: 1;
    justify-content: center;
    background: @color-wrapper;

    .product {
        width: 100%;
        overflow: hidden;
        background: @color-wrapper;

        .cate {
            width: 20%;
            height: 100%;
            overflow: hidden;
            .float-left();

            li {
                width: 100%;
                text-align: center;
                .line-height(45px);
                font-weight: bold;
                cursor: pointer;
                color: @color-normal;
                font-size: @font-11pt;
                background: @color-std-white;
                border-bottom: 1px solid @color-wrapper;

                &.active {
                    width: 99%;
                    color: @color-yellow;
                    border-bottom: 1px solid @color-std-white;
                    background: @color-wrapper;
                }
            }
        }

        .list {
            width: 80%;
            height: 100%;
            overflow: hidden;
            .float-left();

            .recommend {
                width: 100%;
                height: 25%;
                overflow: hidden;
                .float-left();

                a {
                    display: block;
                    height: 90%;
                    width: 100%;

                    img {
                        width: 96%;
                        height: 90%;
                        margin: 2%;
                    }
                }
            }

            .sub_cate {
                width: 98%;
                margin-left: 2%;
                overflow: hidden;
                background: @color-std-white;

                li {
                    width: 33%;
                    .float-left();
                    overflow: hidden;

                    a {
                        display: block;
                        width: 80%;
                        margin-left: 10%;
                        height: 100%;

                        .img {
                            width: 100%;
                            overflow: hidden;
                            .float-left();
                            flex: 1;
                            justify-content: center;

                            img {
                                width: 80%;
                                margin: 5% 10%;
                                border-radius: 10px;
                            }
                        }

                        .title {
                            width: 100%;
                            .line-height(25px);
                            .float-left();
                            text-align: center;
                            color: @color-normal;
                        }
                    }
                }
            }

            dl {
                width: 100%;
                margin-bottom: 5px;
                overflow: hidden;
                background: @color-wrapper;

                dt {
                    width: 98%;
                    .line-height(30px);
                    margin-left: 2%;
                    text-indent: 1em;
                    background: @color-wrapper;
                }

                dd {
                    width: 98%;
                    margin-left: 2%;
                    overflow: hidden;
                    background: @color-std-white;

                    li {
                        width: 33%;
                        .float-left();
                        overflow: hidden;

                        a {
                            display: block;
                            width: 100%;
                            height: 100%;

                            .img {
                                width: 100%;
                                overflow: hidden;
                                .float-left();
                                flex: 1;
                                justify-content: center;

                                img {
                                    width: 80%;
                                    margin: 10%;
                                    border-radius: 10px;
                                }
                            }

                            .title {
                                width: 100%;
                                .line-height(25px);
                                .float-left();
                                text-align: center;
                                color: @color-normal;
                            }
                        }
                    }
                }
            }
        }
    }
}